<template>
  <el-dialog
    title="地图定位"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="800px">
    <div id="container"></div>
  </el-dialog>
</template>

<script>
  import MapLoader from '@/assets/js/AMap.js'
  import { selectuserdaka } from '@/api/wxqiandao'
  import { isEmptyValue } from '@/utils/validate'
  export default {
    name: "index",
    props: {
      openid: {
        type: String,
        default: ''
      },
      IsdialogVisible:{
        type: Boolean,
        default: false
      }
    },
    data () {
        return {
          dialogVisible: this.IsdialogVisible,
          addressLog:[],
          map: null
        }
    },
    mounted () {
      this.mapLoad()
    },
    methods: {
      mapLoad(){
        let _this = this
        MapLoader().then(AMap => {
          _this.map = new AMap.Map('container')
          _this.anLoad()
        }, e => {
          console.log('地图加载失败' ,e)
        })
      },
      anLoad(){
        selectuserdaka(this.openid).then(response=>{
          let nd = response.data
          let anArray = []
          if(isEmptyValue(nd)){return}
          nd.forEach(item => {
            if(item.longitude){
              let marker = new AMap.Marker({
                position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: item.time
              });
              anArray.push(marker)
            }
          })

          // 将创建的点标记添加到已有的地图实例：
          this.map.add(anArray);
          // 自动适配到合适视野范围
          // 无参数，默认包括所有覆盖物的情况
          this.map.setFitView();
        })
      },
      handleClose(){
        this.dialogVisible = false
        this.$emit('update:IsdialogVisible', false)
      }
    }
  }
</script>

<style scoped>
  #container {
    width:100%;
    height: 480px;
  }
</style>
